<template>
  <div class="table-resource-root">
    <div class="table-operator">
      <!-- 选择服务集群 -->
      <div style="width: 400px;">
        <el-select v-model="curServiceId" :loading="serviceIdsLoding" loading-text="正在查询集群名称..."
          :placeholder="serviceIdsPlaceholder" @change="serviceChangeHandler" @focus="getRouteIds()">
          <el-option v-for="item in serviceIdOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>

      <!-- 资源搜索框 -->
      <el-input v-model="dataSearch" placeholder="搜索资源名" style="margin-left: 10px;" />
      <el-button type="primary" :icon="Refresh" @click="getResource()" style="margin-left:10px;">刷新</el-button>
      <el-button type="primary" :icon="InfoFilled" @click="qsShowHandler()" style="margin-left:10px;">QA</el-button>
    </div>
    <div class="table">
      <el-table border height="100%" tooltip-effect="dark" v-loading="tableLoading" :data="filterTableDatas"
        @row-click=rowClick>
        <el-table-column sortable prop="resource" min-width="250" :show-overflow-tooltip=true label="资源名称(24小时内)" />
        <el-table-column sortable prop="success" width="80" align="right" label="请求数" />
        <el-table-column sortable prop="avgRt" width="90" align="right" label="avgRT">
          <template #default="scope">
            <el-tag class="fail-border fail-bg" effect="dark" v-if="scope.row.avgRt > 1000">
              {{ scope.row.avgRt }} <span v-if="scope.row.avgRt > 1000" style="font-weight: 700;"></span>
            </el-tag>
            <span v-else>{{ scope.row.avgRt }}</span>
          </template>
        </el-table-column>
        <el-table-column sortable prop="maxRt" width="80" align="right" label="maxRT">
          <template #default="scope">
            <el-tag class="fail-border fail-bg" effect="dark" v-if="scope.row.maxRt > 1000">
              {{ scope.row.maxRt }} <span v-if="scope.row.maxRt > 1000" style="font-weight: 700;"></span>
            </el-tag>
            <span v-else>{{ scope.row.maxRt }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <el-dialog width="50%" v-model="qaShow" title="Sentinel QA">
    <qaSentinel></qaSentinel>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { Refresh, InfoFilled } from '@element-plus/icons-vue';
import { resourcesRestfulApi } from '@/api/sentinel';
import { isNull } from "@/assets/utils/obj";
import { routeIdsApi } from '@/api/gateway';
import qaSentinel from "./QASentinel.vue"

// ----------------------------------------< 下拉列表 >----------------------------------------
/**
 * serviceIdsLoding: 加载框
 * serviceIds: 集群名称下拉列表
 * curServiceId: 当前选中的后台服务 serviceId, 会从 store 中获取上次选择的 serviceId
 */
const serviceIdsLoding = ref<boolean>(true);
const serviceIdsPlaceholder = ref<string>('正在查询集群名称...');
const serviceIdOptions = ref([{ value: '', label: '' }]);
const curServiceId = ref<string>('')

const getRouteIds = () => {
  serviceIdsLoding.value = true;
  serviceIdsPlaceholder.value = '正在查询集群名称...';
  routeIdsApi().then(resp => {
    serviceIdOptions.value = resp.data.map((ele: string) => {
      let serviceId: string = ele.substring(ele.indexOf('_') + 1);
      return {
        value: serviceId,
        label: serviceId
      };
    })

    // 无值时设置默认值
    if (curServiceId.value == '') {
      curServiceId.value = serviceIdOptions.value[0].value;
      getResource();
      serviceIdChange(curServiceId.value);
    }
    serviceIdsLoding.value = false;
  }).catch(() => {
    curServiceId.value = '';
    serviceIdsPlaceholder.value = '集群查询失败!';
  })
}

/**
 * 下拉列表选择服务
 */
const serviceChangeHandler = () => {
  getResource();
  serviceIdChange(curServiceId.value);
}

const serviceIdChange = (serviceId: string) => {
  emits('serviceIdChange', serviceId)
}

// ----------------------------------------< 资源列表 >----------------------------------------
const tableLoading = ref(false);
const tableDatas = ref([]);
const dataSearch = ref('');

const getResource = () => {
  resourcesRestfulApi(curServiceId.value, { interval: '1d' }).then(resp => {
    tableDatas.value = resp.data;
    serviceIdChange(curServiceId.value);
  })
}

/**
 * 过滤数据
 */
const filterTableDatas = computed(() => {
  return tableDatas.value.filter((metric: any) => {
    if (isNull(dataSearch.value)) {
      return true;
    }
    return metric.resource.toLowerCase().includes(dataSearch.value.toLowerCase())
  })
})

const rowClick = (row: any) => {
  emits('rowClick', row.resource)
}

// ----------------------------------------< QA >----------------------------------------
const qaShow = ref(false);
const qsShowHandler = () => {
  if (qaShow.value === true) {
    qaShow.value = false;
  } else {
    qaShow.value = true;
  }
}

onMounted(() => {
  getRouteIds();
})

// ---------------- emits
const emits = defineEmits(['rowClick', 'serviceIdChange'])

</script>

<style scoped lang="scss">
.table-resource-root {
  @include box(100%, 100%);

  .table-operator {
    @include box(100%, 30px);
    @include flex(row, space-around, flex-start);
  }

  .table {
    @include box(100%, calc(100% - 30px));

    :deep(.el-tag--small) {
      padding: 0 3px;
    }
  }

  .to-high {
    @extend .fail-clr;
    border: 1px solid red;

    &:before {
      content: '↑';
      font-size: 15px;
    }
  }


}
</style>